<template>
  {{ checkedKeys }}
  <NvCrud v-model:checked-row-keys="checkedKeys" :option :data>
    <template #multi-select-bar>
      <NButton :disabled="!checkedKeys.length" text type="primary">
        批量操作
      </NButton>
    </template>
  </NvCrud>
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { NButton } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

const checkedKeys = ref<number[]>([])
const data = Array.from({ length: 3 }, (_, i) => ({
  id: i + 1,
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
}))

const option: NvCrudOption = {
  rowKey: row => row.id,
  selection: {},
  multiSelectBar: {
    type: 'info',
  },
  rowActions: false,
  actionbar: false,
  toolbar: false,
  fields: {
    name: { title: '姓名' },
    sex: { title: '性别' },
    age: { title: '年龄' },
  },
}
</script>
